<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <header class="header">
      <div class="header-content">
        <div class="header-left">
          <view class="back-btn" @click="goBack">
            <text class="fas fa-arrow-left"></text>
          </view>
          <text class="header-title">扫码清运</text>
        </div>
        <div class="header-right">
          <view class="scan-btn" @click="scanDevice">
            <text class="fas fa-qrcode"></text>
            <text class="scan-text">扫码</text>
          </view>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
      <!-- 回收箱信息卡片 -->
      <view class="device-info-card">
        <view class="card-title">
          <text class="title-text">回收箱信息</text>
          <view class="status-badge" :class="deviceInfo.status">
            <text class="status-text">{{ getStatusText(deviceInfo.status) }}</text>
          </view>
        </view>
        
        <view class="device-details">
          <view class="detail-row">
            <view class="detail-item">
              <text class="detail-label">设备名称</text>
              <text class="detail-value">{{ deviceInfo.name }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">设备编号</text>
              <text class="detail-value">{{ deviceInfo.deviceId }}</text>
            </view>
          </view>
          
          <view class="detail-row">
            <view class="detail-item">
              <text class="detail-label">设备位置</text>
              <text class="detail-value">{{ deviceInfo.location }}</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">当前重量</text>
              <text class="detail-value weight">{{ deviceInfo.weight }}KG</text>
            </view>
          </view>
          
          <view class="detail-row">
            <view class="detail-item">
              <text class="detail-label">容量占比</text>
              <text class="detail-value">{{ deviceInfo.fillPercentage }}%</text>
            </view>
            <view class="detail-item">
              <text class="detail-label">上次清运</text>
              <text class="detail-value">{{ deviceInfo.lastCleanup }}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 清运信息填写 -->
      <view class="cleanup-form-card">
        <view class="card-title">
          <text class="title-text">清运信息</text>
        </view>
        
        <view class="form-content">
          
          <!-- 布袋编号 -->
          <view class="form-item">
            <text class="form-label">布袋编号</text>
            <view class="input-with-scan">
              <input 
                class="form-input-scan" 
                type="text" 
                placeholder="请输入或扫码获取布袋编号"
                v-model="cleanupForm.bagNumber"
              />
              <view class="scan-bag-btn" @click="scanBagNumber">
                <text class="fas fa-qrcode"></text>
                <text class="scan-bag-text">扫码获取</text>
              </view>
            </view>
          </view>
          
          <!-- 备注信息 -->
          <view class="form-item">
            <text class="form-label">备注信息（可选）</text>
            <textarea 
              class="form-textarea" 
              placeholder="请输入备注信息"
              v-model="cleanupForm.remark"
              maxlength="200"
            ></textarea>
          </view>
        </view>
      </view>

      <!-- 温馨提示 -->
      <view class="tip-card">
        <view class="tip-icon">
          <text class="fas fa-info-circle"></text>
        </view>
        <view class="tip-content">
          <text class="tip-title">温馨提示</text>
          <text class="tip-text">清运后请及时正确放置布袋并关好仓门</text>
        </view>
      </view>

      <!-- 底部操作按钮 -->
      <view class="action-buttons">
        <view class="submit-btn" @click="submitCleanupOrder">
          <text class="fas fa-check"></text>
          <text class="btn-text">提交清运订单</text>
        </view>
      </view>
    </main>
  </view>
</template>

<script>
export default {
  data() {
    return {
      deviceInfo: {
        id: 1,
        name: '智能回收箱-001',
        deviceId: 'RB-001-2024',
        location: '科技园A座门口',
        weight: 45.2,
        fillPercentage: 90,
        status: 'full',
        lastCleanup: '2天前'
      },
      cleanupForm: {
        weight: '',
        bagNumber: '',
        remark: ''
      }
    }
  },
  onLoad(options) {
    // 如果有传入的设备信息，则加载对应设备
    if (options.deviceId) {
      this.loadDeviceInfo(options.deviceId);
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    // 扫码获取设备信息
    scanDevice() {
      uni.showLoading({
        title: '扫码中...'
      });
      
      // 模拟扫码过程
      setTimeout(() => {
        uni.hideLoading();
        
        // 模拟扫码成功，更新设备信息
        this.deviceInfo = {
          id: 2,
          name: '智能回收箱-002',
          deviceId: 'RB-002-2024',
          location: '办公楼B栋1楼',
          weight: 38.5,
          fillPercentage: 77,
          status: 'full',
          lastCleanup: '1天前'
        };
        
        uni.showToast({
          title: '扫码成功',
          icon: 'success'
        });
      }, 1500);
    },
    
    // 扫码获取布袋编号
    scanBagNumber() {
      uni.showLoading({
        title: '扫码中...'
      });
      
      // 模拟扫码过程
      setTimeout(() => {
        uni.hideLoading();
        
        // 生成布袋编号
        const today = new Date();
        const dateStr = today.getFullYear() + 
                       String(today.getMonth() + 1).padStart(2, '0') + 
                       String(today.getDate()).padStart(2, '0');
        const randomNum = String(Math.floor(Math.random() * 999) + 1).padStart(3, '0');
        
        this.cleanupForm.bagNumber = `BG-${dateStr}-${randomNum}`;
        
        uni.showToast({
          title: '扫码成功',
          icon: 'success'
        });
      }, 1000);
    },
    
    // 加载设备信息
    loadDeviceInfo(deviceId) {
      // 模拟根据设备ID加载设备信息
      const deviceData = {
        1: {
          id: 1,
          name: '智能回收箱-001',
          deviceId: 'RB-001-2024',
          location: '科技园A座门口',
          weight: 45.2,
          fillPercentage: 90,
          status: 'full',
          lastCleanup: '2天前'
        },
        2: {
          id: 2,
          name: '智能回收箱-002',
          deviceId: 'RB-002-2024',
          location: '办公楼B栋1楼',
          weight: 38.5,
          fillPercentage: 77,
          status: 'full',
          lastCleanup: '1天前'
        },
        3: {
          id: 3,
          name: '智能回收箱-003',
          deviceId: 'RB-003-2024',
          location: '员工餐厅旁',
          weight: 42.8,
          fillPercentage: 86,
          status: 'full',
          lastCleanup: '3天前'
        }
      };
      
      this.deviceInfo = deviceData[deviceId] || deviceData[1];
    },
    
    // 获取状态文本
    getStatusText(status) {
      const statusMap = {
        'full': '已满',
        'high': '较满',
        'normal': '正常'
      };
      return statusMap[status] || '正常';
    },
    
    // 提交清运订单
    submitCleanupOrder() {
      // 表单验证
      if (!this.cleanupForm.weight) {
        uni.showToast({
          title: '请输入清运重量',
          icon: 'none'
        });
        return;
      }
      
      if (!this.cleanupForm.bagNumber) {
        uni.showToast({
          title: '请输入布袋编号',
          icon: 'none'
        });
        return;
      }
      
      // 重量验证
      const weight = parseFloat(this.cleanupForm.weight);
      if (isNaN(weight) || weight <= 0) {
        uni.showToast({
          title: '请输入有效的清运重量',
          icon: 'none'
        });
        return;
      }
      
      if (weight > this.deviceInfo.weight) {
        uni.showToast({
          title: '清运重量不能超过当前重量',
          icon: 'none'
        });
        return;
      }
      
      // 确认提交
      uni.showModal({
        title: '确认提交',
        content: `确定提交清运订单吗？\n设备：${this.deviceInfo.name}\n重量：${this.cleanupForm.weight}KG\n布袋编号：${this.cleanupForm.bagNumber}`,
        success: (res) => {
          if (res.confirm) {
            this.submitOrder();
          }
        }
      });
    },
    
    // 执行订单提交
    submitOrder() {
      uni.showLoading({
        title: '提交中...'
      });
      
      // 模拟提交过程
      setTimeout(() => {
        uni.hideLoading();
        
        uni.showModal({
          title: '提交成功',
          content: '清运订单已成功提交，请及时完成清运工作！',
          showCancel: false,
          success: () => {
            // 返回清运管理页面
            uni.navigateBack();
          }
        });
      }, 2000);
    }
  }
}
</script>

<style>
.container {
  width: 100%;
  min-height: 100vh;
  background: linear-gradient(to bottom, #f6ffed, #f6ffed);
}

/* 顶部导航栏 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 999;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 30rpx;
}

.header-left {
  display: flex;
  align-items: center;
}

.back-btn {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20rpx;
}

.back-btn .fas {
  font-size: 24rpx;
  color: #1D2129;
}

.header-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #1D2129;
}

.header-right {
  display: flex;
  align-items: center;
}

.scan-btn {
  display: flex;
  align-items: center;
  background-color: #165DFF;
  padding: 12rpx 20rpx;
  border-radius: 20rpx;
}

.scan-btn .fas {
  font-size: 24rpx;
  color: #fff;
  margin-right: 8rpx;
}

.scan-text {
  font-size: 24rpx;
  color: #fff;
}

/* 主内容区 */
.main-content {
  padding: 120rpx 30rpx 30rpx;
}

/* 卡片通用样式 */
.device-info-card, .cleanup-form-card, .tip-card {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.card-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #F2F3F5;
}

.title-text {
  font-size: 28rpx;
  font-weight: bold;
  color: #1D2129;
}

.status-badge {
  padding: 8rpx 16rpx;
  border-radius: 12rpx;
  font-size: 20rpx;
}

.status-badge.full {
  background-color: rgba(245, 63, 63, 0.1);
  color: #F53F3F;
}

.status-badge.high {
  background-color: rgba(255, 125, 0, 0.1);
  color: #FF7D00;
}

.status-badge.normal {
  background-color: rgba(0, 180, 42, 0.1);
  color: #00B42A;
}

/* 设备详情 */
.device-details {
  display: flex;
  flex-direction: column;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.detail-row:last-child {
  margin-bottom: 0;
}

.detail-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.detail-label {
  font-size: 20rpx;
  color: #86909C;
  margin-bottom: 8rpx;
}

.detail-value {
  font-size: 24rpx;
  color: #1D2129;
  font-weight: bold;
}

.detail-value.weight {
  color: #165DFF;
}

/* 表单样式 */
.form-content {
  display: flex;
  flex-direction: column;
}

.form-item {
  margin-bottom: 24rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.form-label {
  font-size: 24rpx;
  color: #1D2129;
  margin-bottom: 12rpx;
  display: block;
}

.form-input {
  width: 100%;
  padding: 20rpx;
  background-color: #F2F3F5;
  border-radius: 12rpx;
  font-size: 24rpx;
  color: #1D2129;
  border: none;
}

.input-with-scan {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.form-input-scan {
  flex: 1;
  padding: 20rpx;
  background-color: #F2F3F5;
  border-radius: 12rpx;
  font-size: 24rpx;
  color: #1D2129;
  border: none;
}

.scan-bag-btn {
  display: flex;
  align-items: center;
  padding: 20rpx 24rpx;
  background-color: #165DFF;
  border-radius: 12rpx;
  gap: 8rpx;
}

.scan-bag-btn .fas {
  font-size: 20rpx;
  color: #fff;
}

.scan-bag-text {
  font-size: 22rpx;
  color: #fff;
}

.form-textarea {
  width: 100%;
  min-height: 120rpx;
  padding: 20rpx;
  background-color: #F2F3F5;
  border-radius: 12rpx;
  font-size: 24rpx;
  color: #1D2129;
  border: none;
  resize: none;
}

/* 温馨提示 */
.tip-card {
  display: flex;
  align-items: flex-start;
  background-color: rgba(22, 93, 255, 0.05);
  border: 1rpx solid rgba(22, 93, 255, 0.2);
}

.tip-icon {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
}

.tip-icon .fas {
  font-size: 24rpx;
  color: #165DFF;
}

.tip-content {
  flex: 1;
}

.tip-title {
  font-size: 24rpx;
  font-weight: bold;
  color: #165DFF;
  margin-bottom: 8rpx;
  display: block;
}

.tip-text {
  font-size: 22rpx;
  color: #165DFF;
  line-height: 1.5;
}

/* 操作按钮 */
.action-buttons {
  margin-top: 40rpx;
}

.submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28rpx;
  background-color: #165DFF;
  border-radius: 16rpx;
  gap: 12rpx;
  transition: all 0.3s ease;
}

.submit-btn:active {
  transform: scale(0.98);
  background-color: #0E4BA8;
}

.submit-btn .fas {
  font-size: 24rpx;
  color: #fff;
}

.btn-text {
  font-size: 28rpx;
  font-weight: 500;
  color: #fff;
}
</style>